const inp=document.querySelector('input');
inp.onchange=function(){
   console.log(this.files[0]);
   const reader=new FileReader();
   reader.readAsDataURL(this.files[0])
   reader.onload=(e)=>{
    console.log(e.target.result);
    preview.src=e.target.result;
   }
}

const $=document.querySelector.bind(document);
const doms={
   img:$('.preview'),
   container:$('upload'),
   select:$('upload-select'),
   selectFile:$('upload-select input'),
   progress:$('upload-progress'),
   cancelBtn:$('upload-progress button'),
   delBtn:$('upload-result button')
}
console.log(doms)

//展示不同的框
function showArea(areaName){
   doms.container.className=`upload ${areaName}`;
}

// 展示进度条
function setProgress(value){
   doms.progress.style.setProperty(value);
}
//弹出选择框
doms.select.onclick=function(){
   doms.selectFile.click();
}
//已选择上传文件
doms.selectFile.onchange=function(){
   if(this.files.length===0){
      return;
   }
   const file=this.files[0];
   console.log(file);
   if(!validateFile(file)){
      return;
   }
   const reader=new FileReader();
   reader.onload=(e)=>{
    console.log(e.target.result);
    preview.src=e.target.result;
   }
   reader.readAsDataURL(this.files[0])
   //上传
   upload(file,function(val){
      //进度变化
   },function(resp){
      //上传成功返回结果
   })
}
//上传
function upload(file,onProgress,onFinish){
   let p=0;
   onProgress(p)
   return function(){

   }
}
// 校验文件
function validateFile(file){
   const sizeLimit=1*1024*1024;
   const legalExts=['*.jpg','*.jpeg','*.bmp','*.webp','*.gif','*.png'];
   if(file.length>sizeLimit){
      alert("文件尺寸过大")
      return false;
   }
   const name=file.name.toLowerCase();
   if(!legalExts.some((ext)=>name.endsWidth(ext))){
      alert('文件类型不正确')
      return false;
   }
   return true;
}
